<!-- 首页 -->
<template>
	<view class="index">
		<cu-custom bgColor="bg-gradual-red" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">首页</block>
		</cu-custom>
		<!--搜索框-->
		<view class="search" @click="toSearch()">
			<u-search disabled placeholder="搜菜谱" shape="square" :showAction="false" inputAlign="center" height="40"></u-search>
		</view>
		<!-- 轮播图  接口开发完成后，取消注释-->
		<view>
<!-- 			<swiper class="swiper" indicator-dots circular>
				<swiper-item v-for="item in swipers" :key="item.dishId" @click="toDishInfo(item.dishId)">
					<image :src="item.imageUrl"></image>
				</swiper-item>
			</swiper> -->
			<swiper class="swiper" indicator-dots circular>
				<swiper-item>
					<image src="../../static/img/hotMeal1.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/img/hotMeal1.jpg"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--三餐推荐+分类导航-->
		<view class="nav">
			<view class="nav_item" @click="toDaily()">
				<view class="nav_text1">
					<text>早中晚餐</text>
					<text>每日三餐推荐</text>
				</view>
				<view class="t-icon t-icon-taiyang"></view>
			</view>
			<view class="nav_item" @click="toSort()">
				<view class="nav_text2">
					<text>分类</text>
					<text>全部菜谱</text>
				</view>
				<view class="t-icon t-icon-_biaoqian-"></view>
			</view>
		</view>
		<!-- 推荐菜谱 接口开发完成后，取消注释 -->
		<view class="hot_dish">
			<view class="tit">热门推荐</view>
			<view>
				<hot-dishes :list="hotDishes" @itemClick="toDishInfo"></hot-dishes>
<!-- 				<view class="menu_item" v-for = "item in hotMenus" :key = "item.menuId" @click="toMenuInfo()">
					<image :src="item.imageUrl"></image>
					<view class="menuName">
						<text>{{item.menuName}}</text> -->
						<!-- <text>￥2499</text> -->
<!-- 					</view>
					<view class="info">
						<text>发布者:{{item.author}}</text>
						<text>收藏数:{{item.collectNum}}</text>
						<text>浏览数:{{item.viewNum}}</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hotDishes from "../../components/dish-big-item/dish-big-item.vue"
	export default {
		data() {
			return{
				swipers:[],
				hotDishes:[]
			}
		},
		components: {"hot-dishes":hotDishes},
		onLoad() {
			this.getSwipers(),
			this.getHotDishes()
		},
		onReachBottom(){
			console.log("触底了")
			this.getHotDishes()
		},
		onPullDownRefresh(){
			console.log("下拉刷新了")
			this.hotDishes = []
			setTimeout(() => {
				this.getHotDishes(()=>{
					uni.stopPullDownRefresh()
				})
			},1000)
		},
		methods: {
			//获取热点推荐轮播图数据
			async getSwipers(){
				console.log("获取轮播图的数据")
				const res = await this.$myRequest({
					url:'mock/669879/api/hot'
				})
				console.log(res)
				this.swipers = res.data.page.list
			},
			//点击搜索框，跳转搜索页
			toSearch(){
				uni.navigateTo({
					url:"../search/search"
				})
			},
			//点击"三餐推荐"，跳转到三餐推荐页
			toDaily(){
				uni.navigateTo({
					url:"../daily/daily"
				})
			},
			//点击"分类"，跳转到分类页
			toSort(){
				uni.navigateTo({
					url:"../sort/sort"
				})
			},
			//获取离线推荐菜谱的数据
			async getHotDishes(callBack){
				const res = await this.$myRequest({
					url:'mock/669879/api/today'
				})
				this.hotDishes = [...this.hotDishes,...res.data.page.list]
				callBack && callBack()
			},
			//跳转到对应的菜谱详情页
			toDishInfo(id){
				console.log(id)
				uni.navigateTo({
					url:"../dishInfo/dishInfo?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.index{
		swiper{
			width:750rpx;
			height:380rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.search{
			background-color: #F56C6C;
			padding: 10px 40px;
		}
		.nav{
			display: flex;
			margin-top: 20rpx;
			.nav_item{
				width: 50%;
				display: flex;
				background-color: #FFFFFF;
				margin: 20rpx;
				padding: 15rpx 30rpx 15rpx 0;
				text-align: center;
				justify-content: center;
			}
			.nav_text1{
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 0;
				font-size:16px;
				text:nth-child(1){
					padding-left: 25rpx;
				}
				text:nth-child(2){
					color:#808080;
					font-size: 14px;
					padding: 16rpx 0 0 17rpx;
				}
			}
			.nav_text2{
				display: flex;
				flex-direction: column;
				padding: 0 40rpx 0 0;
				font-size:16px;
				text:nth-child(1){
					padding-left: 25rpx;
				}
				text:nth-child(2){
					color:#808080;
					font-size: 14px;
					padding: 16rpx 0 0 17rpx;
				}
			}
		}
		.hot_dish{
			// background: #eee;
			background-color: #F1F1F1;
			overflow: hidden;
			margin-top: 10px;
			.tit{
				height: 50px;
				line-height: 50px;
				color: $shop-color;
				text-align: center;
				letter-spacing: 20px;
				background: #fff;
				margin: 7rpx 0;
			}
		}
	}
	.t-icon-taiyang {
		height: 70rpx;
		width: 70rpx;
		margin-top:5px;
	}
	.t-icon-_biaoqian-{
		height: 60rpx;
		width: 60rpx;
		margin-top: 5px;
	}

</style>
